<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
    <script src="__STATIC__heiseshop_admin/css/bootstrap.min.css"></script>
    <script src="__STATIC__heiseshop_admin/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<style> /*表单标签*/ #box{ margin:50px auto; width:600px; padding-bottom: 10px; min-height:400px; background:#FF9; } /*点击添加图片按钮div包裹*/ .addbtn_wrap{ position: relative; } /*添加图片按钮*/ .addbtn{ position: absolute; } input[type=file]{ width: 100px; position: absolute; top: 5px; opacity: 0; } /*提交按钮*/ input[type=submit]{ margin: 0 auto; display: none; } /*所有图片div包裹*/ .img_wrap{ width:600px; margin-top: 40px; float: left; margin-bottom: 40px; } .pic_wrap{ width: 180px; height: 160px; float: left; position: relative; margin: 5px; } .img{ width: 180px; height: 160px; float: left; } .delete{ width: 180px; height: 160px; position: absolute; display: none; border-radius: 6px; } .delete img{ float: right; } </style>

<body>
    <form method="post" enctype="multipart/form-data" action="{:url('index/file')}" id="box"> <!--file包裹--> <div class="addbtn_wrap"> <input type="button" class="btn btn-primary addbtn" value="点击添加图片"> <input type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)"> </div> <!--图片包裹--> <div class="img_wrap"> </div> <input type="submit" value="开始上传" class=" btn btn-primary "> </form>

</body>
</html>
<script type="text/javascript"> /*预览*/ var count=1; function getPhoto(node) { var imgURL = ""; try{ var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } try{ imgURL = file.getAsDataURL(); }catch(e){ imgRUL = window.URL.createObjectURL(file); } }catch(e){ if (node.files && node.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgURL = e.target.result; }; reader.readAsDataURL(node.files[0]); } } /*动态添加file和对应的图片预览*/ createPic(); createFile(); count++; return imgURL; } /*创建图片预览元素*/ function createPic() { var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+ '<img src="'+imgRUL+'"" class="img img-rounded">'+ '<div class="delete"><img src="__STATIC__heiseshop_admin/images/no.gif" onclick="deletePic(this)"></div>'+ '</div>'; /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/ for(var i=0;i< $('input[type=file]').length-1;i++){ var val= $('input[type=file]').eq(i).val(); if($('input[type=file]').last().val()==val){ /*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/ count=count-1; return; } } $('.img_wrap').append(picText); } /*创建新的file元素*/ function createFile() { var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">'; /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/ for(var i=0;i< $('input[type=file]').length-1;i++){ var val= $('input[type=file]').eq(i).val(); if($('input[type=file]').last().val()==val){ var file = $('input[type=file]').last(); file.after(file.clone().val("")); file.remove(); alert("图片已存在！"); return; } } $('.addbtn_wrap').append(flieText); /*图片数量大于1，显示提交按钮，添加一次判断一次*/ if($('.pic_wrap').length<=0){ $('input[type=submit]').css('display','none'); }else { $('input[type=submit]').css('display','block'); } } /*移入移出，删除遮罩层显示隐藏*/ function overDelete(obj) { $(obj).children('div').show(); } function leaveDelete(obj) { $(obj).children('div').hide(); } /*删除图片和对应的file*/ function deletePic(obj) { /*提取图片的id的数字部分*/ var picId=$(obj).parent().parent().attr('id'); var picVal= picId.replace(/[^0-9]/ig,""); var fileArr=$('input[type=file]'); /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/ fileArr.each(function () { /*提取file的id的数字部分*/ var fileId=$(this).attr('id'); var fileVal = fileId.replace(/[^0-9]/ig,""); if(fileVal==picVal){ $(this).remove(); $(obj).parent().parent().remove(); } }); /*图片数量大于1，显示提交按钮,删除一次判断一次*/ if($('.pic_wrap').length<=0){ $('input[type=submit]').css('display','none'); }else { $('input[type=submit]').css('display','block'); } } </script>
